<template>
  <div>
    <el-row>
      <el-col :span="6">
        <el-row style="margin-bottom: 20px;">
          <el-button type="primary" @click="dialogFormVisible = true">发帖</el-button>
        </el-row>
        <el-tree
          :data="data"
          :props="defaultProps"
          highlight-current
          accordion
        >
        </el-tree>
      </el-col>
      <el-col :span="18">
        <el-row>
          <el-col>
            <div>
              <el-link type="primary" @click="dialogFormVisible2 = true">为了无法计算的价值</el-link>
              <el-divider content-position="right">王老师-2020-08-07</el-divider>
              <el-link type="primary" @click="dialogFormVisible2 = true">为了无法计算的价值</el-link>
              <el-divider content-position="right">王老师-2020-08-07</el-divider>
              <el-link type="primary" @click="dialogFormVisible2 = true">为了无法计算的价值</el-link>
              <el-divider content-position="right">王老师-2020-08-07</el-divider>
              <el-link type="primary" @click="dialogFormVisible2 = true">为了无法计算的价值</el-link>
              <el-divider content-position="right">王老师-2020-08-07</el-divider>
              <el-link type="primary" @click="dialogFormVisible2 = true">为了无法计算的价值</el-link>
              <el-divider content-position="right">王老师-2020-08-07</el-divider>
              <el-link type="primary" @click="dialogFormVisible2 = true">为了无法计算的价值</el-link>
              <el-divider content-position="right">王老师-2020-08-07</el-divider>
              <el-link type="primary" @click="dialogFormVisible2 = true">为了无法计算的价值</el-link>
              <el-divider content-position="right">王老师-2020-08-07</el-divider>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-dialog title="发帖" :visible.sync="dialogFormVisible" width="100%">
      <el-form :model="form">
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input type="input" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item label="内容" :label-width="formLabelWidth">
          <el-col>
            <mavon-editor v-model="form.content"></mavon-editor>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="查看" :visible.sync="dialogFormVisible2" width="80%">
      <div style="margin-bottom: 20px">
        <h2 style="text-align: center; margin-bottom: 20px">文章标题</h2>
        <div>
          豆瓣上有一个形容拖延症状态的帖子，是这样说的：把自己的身体切成碎片放在餐桌上，只剩下一个脑袋存活，嘴巴一块一块吃着自己的身体碎片，很享受。

          这好像是所有拖延症患者的常态，一边享受着浪费时间带来的安逸，一边又为自己浪费时间而后悔。

          网上的80后，90后甚至00后都在吐槽自己的拖延症，仿佛一夜之间成了全名讨论的话题。

          百度给拖延症下的定义是，指自我调节失败，在能够预料后果有害的情况下，仍然把计划要做的事情往后推迟的一种行为。

          而作为一个重度拖延症加三分钟热度患者的我，在这件事情上是非常具有发言权的。

          早上7点闹钟响的时候，立刻关上，再睡5分钟，就这样一点一点往后拖，可能起床的时候已经九点多了。

          计划中的很多事情，都要随着晚起往后推移。睡觉时间就会往后推迟两个多小时，睡得晚导致早上懒床。周而复始，陷入了恶性循环的模式。

          年初制定了一年内要完成的事情：减肥20斤，写200篇文章，看完50本书，30部电影，每天运动一个小时等等。

          直到三月初，2020年已经过去两个月，一切好像还没有开始。

          体重上的数字依然保持和年初一样。200篇的写作计划也是没有任何进展。在当当网买了十几本新书，只拆开了两本。

          想看的30部电影，只有《阿甘正传》在历史记录里保存着，偶尔想起来的锻炼，只是在睡前象征性的做几下拉伸运动。

          总是用时间还很长，一切都来得及安慰自己。可当每天睡觉前看到早上写的计划，没有丝毫变动时，也会觉得难过，愧疚。但第二天依旧重复前一天刷手机、无所事事的状态。

          鲁迅曾经说过：“时间就是生命，浪费自己的时间就是慢性自杀，时间的流逝总是悄无声息，让人难以察觉。”

          而那时的我每天都在死亡边缘挣扎。
        </div>
        <el-divider content-position="right"></el-divider>
      </div>
      <div>
        <span>赞！！！！！！</span>
        <el-divider content-position="right">王老师-2020-08-07</el-divider>
        <span>赞！！！！！！</span>
        <el-divider content-position="right">李老师-2020-08-07</el-divider>
        <span>赞！！！！！！</span>
        <el-divider content-position="right">张老师-2020-08-07</el-divider>
      </div>
      <el-form :model="form" style="margin-top: 20px">
      <el-form-item label="评论">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible2 = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "teachingLearning",
    data() {
      return {
        dialogFormVisible2: false,
        formLabelWidth: "120px",
        dialogFormVisible: false,
        currentDate: new Date(),
        form: {},
        data: [{
          label: '课程 1',
          children: [{
            label: '课件 1',
            children: [{
              label: '帖子 1-1'
            }]
          }]
        }, {
          label: '课程 2',
          children: [{
            label: '课件 2',
            children: [{
              label: '帖子 2-1'
            }]
          }, {
            label: '课件 2-2',
            children: [{
              label: '帖子 2-2-1'
            }]
          }]
        }, {
          label: '课程 3',
          children: [{
            label: '课件 3-1',
            children: [{
              label: '帖子 3-1-1'
            }]
          }, {
            label: '课件 3-2',
            children: [{
              label: '帖子 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  /deep/.el-divider--horizontal {
    margin: 5px 0;
  }
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
